<template>
    <m-choose-time @startChange="startChange" @endChange="endChange" :startOptions="startOptions"></m-choose-time>
    <br>
    <m-choose-date @startChange="dateStartChange" @endChange="dateEndChange" :startOptions="startOptions"></m-choose-date>
</template>
<script lang="ts" setup>
interface endValue {
    startTime: string,
    endTime: string
}
interface dateEndValue {
    startDate: Date,
    endDate: Date
}
let startChange = (val: string) => {
    console.log('startChange', val)
}
let endChange = (val: endValue) => {
    console.log('endChange', val)
}
let startOptions = {
    clearable: false
}
let dateStartChange = (val: string) => {
    console.log('dateStartChange', val)
}
let dateEndChange = (val: dateEndValue) => {
    console.log('dateEndChange', val)
}

</script>